<template>
    <div class="box">
        <div style="background-color: #545a5b;width: 100%;height: 2px;"></div>
        <div style="background-color: #545a5b;width: 100%;height: 2px;margin-top: 2px;"></div>
        <div>
            <div class="kongzhi">
                <div class="car" style="">车辆 : </div>
                <div class="xila">
                    <el-select v-model="clientId" filterable placeholder="请选择或输入设备号" @change="changeClientId" >
                        <el-option
                            v-for="item in list"
                            :key="item"
                            :label="item"
                            :value="item"
                            />
                    </el-select>
                </div>
            </div>
        </div>
        <div >
            <div class="list1">
                <img src="../../assets/img/Refresh.png" 
                class="Refresh"
                :class="{ Refresh: true, spin: isSpinning }" 
                @click="getCarlist" 
                />
            </div>
            <div class="list2">
                <el-select v-model="PlayDistinctLabel" filterable placeholder="视频码流" @change="PlayDistinctEvnt"  style="width:100px ;" :disabled="isDisabled">
                        <el-option
                            v-for="item in PlayDistinctList"
                            :key="item"
                            :label="item.label"
                            :value="item.value"
                            />
                     </el-select>
         
            </div>
            <div class="list3">
                <el-button type="success" class="loads" @click="PlayVideo">播放</el-button>
            </div>
        </div>
        <div style="background-color: #545a5b;width: 100%;height: 2px;clear: both;margin-bottom: 2px;"></div>
        <div style="background-color: #545a5b;width: 100%;height: 2px;clear: both;"></div>
    </div>

    <div class="box2">
        <router-link class="button1" active-class="active" to="/rtvsReal">rtvs实时视频</router-link>
        <router-link class="button2" active-class="active" to="/rtvsBack">rtvs回放视频</router-link>
        <router-link class="button3" active-class="active" to="/flvReal">flv实时视频</router-link>
        <router-link class="button4" active-class="active" to="/flvBack">flv回放视频</router-link>
    </div>
</template>

<script >
import { ElNotification } from 'element-plus';
import api from "@/api/api";
export default {
    name: 'Customize_Head_control',
    props: {},
    data: function () {
        return {
            isDisabled:false,
            clientId: "",
            list: [],
            //播放的主子码流选择
            PlayDistinctValue: 1,
            PlayDistinctLabel:"子码流",
            PlayDistinctList:[
                {label:"子码流",value:1},
                {label:"主码流",value:0}
            ],
            isSpinning: false,
        }
    },
    emits: ['clientId'],
    mounted() {
        this.getCarlist();
    },
    methods: {
        getCarlist() {
            this.isSpinning = true;
            setTimeout(() => {
                this.isSpinning = false;
            }, 500);
            api.getCarsList().then(res => {
                this.list=res.data.intersectionList;
               
            }).catch(err => {
                console.log(err)
            })
        },
        changeClientId(val) {
            this.clientId = val;
        },
        handleMouseMove(event) {
            event.stopPropagation();
        },
        //播放主码流和子码流切换
        PlayDistinctEvnt(val){
           this.PlayDistinctValue=val;
          
        },
        PlayVideo(){
            if(this.clientId==""){
                ElNotification({ title: '警告', message: "请先选择终端设备号", type: 'warning',});
            }else{
                this.isDisabled=true;
                this.$emit("clientId",[this.clientId,this.PlayDistinctValue]);
            }
        }
    },
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
/* 调整父容器样式 */
.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
:deep(.el-input.is-disabled .el-input__wrapper){
    background-color: transparent;
}
:deep(.el-button){
border: #01b2c5;
color: white;
}
.Refresh{
    width: 30px;
    height: 30px;
}
.loads{
    background-color: #01b2c5;
}
.plays{
    background-color: #01b2c5;
}
.car{
    /* color:green; */
    text-align: center;
    float: left;
    line-height: 60px;
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.box {
    margin-top: 5px;
    margin-left: 1%;
    width: 26%;
    background-color: #030E15;
}

.kongzhi {
    margin-left: 10px;
    line-height: 60px;
}

.xila {
    float: left;
    text-align: center;
    height: 60px;
}



.el-button--primary {
    --el-button-border-color: #333736;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
}



.play {
    line-height: 60px;
    width: 100px;
    float: left;
}

.list1 {
    margin-left: 10px;
    margin-top: 10px;
    float: left;
    line-height: 60px;
}
.list2 {
    margin-left: 10px;
    float: left;
    line-height: 60px;
}
.list2 span{
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.list3 {
    margin-left: 10px;
    float: left;
    line-height: 60px;
}
.box2 {
    clear: both;
    float: right;
    width: 22VW;
    height: 30px;
    margin-right: 2%;
    margin-top: -60px;
    background-color: #111010;
    text-align: center;
    
}

.button1 {
    line-height: 30px;
    float: left;
    color: aliceblue;
    text-align: center;
    width: 25%;

}

.button2 {
    line-height: 30px;
    float: left;
    color: aliceblue;
    text-align: center;
    width: 25%;

}
.button3 {
    line-height: 30px;
    color: aliceblue;
    text-align: center;
    width: 25%;
    float: left;
}
.button4 {
    line-height: 30px;
    float: left;
    color: aliceblue;
    text-align: center;
    width: 25%;

}
.button5 {
    line-height: 30px;
    color: aliceblue;
    text-align: center;
    width: 20%;
    float: left;
}

.Real_time_map {
    margin-top: 1.5%;
    margin-left: 1.5%;
    width: 97%;
    height: 97%;
}



.active {
  
    background-color: #01b2c5;
    pointer-events: none;
    opacity: 1;
}

a {
    text-decoration: none;
}

.router-link-active {
    text-decoration: none;
}

:deep(.el-input__wrapper){
   background-color: transparent;
}
:deep(.el-input__inner){
    color:aliceblue;
}

</style>
